<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>methods购物车</title>
    <script src="https://cdn.jsdelivr.net/npm/vue "></script>
    <style>
        [v-cloak] {
            display: none;
        }

        table {
            border: 1px soli #e9e9e9;
            border-collapse: collapse;
            border-spacing: 0;
            empty-cells: show;
        }

        th,
        td {
            padding: 8px 20px;
            border: 1px solid #e9e9e9;
            text-align: center;
            line-height: 40px;
        }

        th {
            background-color: #f7f7f7;
            color: #5c6b77;
            font-weight: 600;
            white-space: nowrap;
        }
    </style>
</head>

<body>
    <div id="app" cloak>
        <template v-if="show">
            <table v-for='(table,tableindex) in tables' v-if='table.tablelist.length'>
                <tbody>
                    <tr>
                        <th>
                            <input type="checkbox" v-on:click='fatherclick(table)' v-bind:checked='fatherchecked(table)'> {{table.name}}
                        </th>
                        <th>{{headers[0]}}</th>
                        <th>{{headers[1]}}</th>
                        <th>{{headers[2]}}</th>
                        <th>{{headers[3]}}</th>
                        <th>{{headers[4]}}</th>
                    </tr>
                    <tr v-for='(body,index) in table.tablelist'>
                        <td>
                            <input type="checkbox" v-on:click='sonclick(body)' v-bind:checked='sonchecked(body)'>
                        </td>
                        <td>
                            <img v-bind:src='body.src'>
                            <a>{{body.name}}</a>
                        </td>
                        <td>{{body.price}}</td>
                        <td>
                            <button type="button" v-on:click='less(body)'>-</button>
                            <span>{{body.count}}</span>
                            <button type="button" v-on:click='plus(body)'>+</button>
                        </td>
                        <td>{{body.price*body.count}}</td>
                        <td>
                            <button type="button" v-on:click='delect(index,tableindex)'>del</button>
                        </td>
                    </tr>
                </tbody>
            </table>
            <div>
                <input type="checkbox" v-bind:checked='parentchenked()' v-on:click='parentclick()'>
                <span>{{totalselect}}</span>
                <span>件商品</span>
                <span>￥{{totalprice}}</span>
                <button type="button">去结算</button>
            </div>
        </template>
        <div v-else>购物车为空</div>
    </div>
    <script>
        var app = new Vue({
            el: '#app',
            data: {
                show: true,
                headers: ['商品名称', '单价', '数量', '金额', '操作'],
                tables: [
                    {
                        name: '蔬菜',
                        tablelist: [
                            {
                                src: 'plugin_icon_qq_portal.png',
                                name: '菠菜',//商品名称
                                price: '2',//单价
                                count: '1',//数量
                                sonchecked: false
                            },
                            {
                                src: 'plugin_icon_qq_portal.png',
                                name: '菠菜',//商品名称
                                price: '2',//单价
                                count: '1',//数量
                                sonchecked: false
                            },
                            {
                                src: 'plugin_icon_qq_portal.png',
                                name: '菠菜',//商品名称
                                price: '2',//单价
                                count: '1',//数量
                                sonchecked: false
                            }
                        ]
                    },
                    {
                        name: '家电',
                        tablelist: [
                            {
                                src: 'plugin_icon_qq_portal.png',
                                name: '冰箱',//商品名称
                                price: '2',//单价
                                count: '1',//数量
                                sonchecked: false
                            },
                            {
                                src: 'plugin_icon_qq_portal.png',
                                name: '冰箱',//商品名称
                                price: '2',//单价
                                count: '1',//数量
                                sonchecked: false
                            }
                        ]
                    },
                    {
                        name: '数码',
                        tablelist: [
                            {
                                src: 'plugin_icon_qq_portal.png',
                                name: '荣耀x5',//商品名称
                                price: '2',//单价
                                count: '1',//数量
                                sonchecked: false
                            },
                            {
                                src: 'plugin_icon_qq_portal.png',
                                name: '手机',//商品名称
                                price: '2',//单价
                                count: '1',//数量
                                sonchecked: false
                            }
                        ]
                    }
                ]
            },
            computed: {
                totalprice: function () {//for循环写法
                    var priceall = 0;
                    for (var i = 0; i < this.tables.length; i++) {
                        for (var x = 0; x < this.tables[i].tablelist.length; x++) {
                            if (this.tables[i].tablelist[x].sonchecked === true) {
                                priceall = priceall + this.tables[i].tablelist[x].price * this.tables[i].tablelist[x].count;
                            }
                        }
                    }
                    return priceall;
                },
                totalselect: function () {//获取已选商品总数
                    var selectall = 0;
                    for (var i = 0; i < this.tables.length; i++) {
                        for (var x = 0; x < this.tables[i].tablelist.length; x++) {
                            if (this.tables[i].tablelist[x].sonchecked === true) {
                                selectall++;
                            }
                        }
                    }
                    return selectall
                }
            },
            methods: {
                sonclick: function (body) {//取反，当前选中状态和实际的值是相反的，因此需要取反
                    body.sonchecked = !body.sonchecked;
                },
                sonchecked: function (body) {//返回三级框选中状态，sonchecked是通过v-bind绑定了checked状态，必须通过return返回
                    return body.sonchecked
                },
                fatherclick: function (table) {
                    var fatherclickflg = this.fatherchecked(table)//获取当前二级选框下面，所有三级选框选中的状态是true还是false
                    if (fatherclickflg === true) {
                        fatherclickflg = false
                    }
                    else {
                        fatherclickflg = true
                    }
                    for (var i = 0; i < table.tablelist.length; i++) {
                        table.tablelist[i].sonchecked = fatherclickflg
                    }
                },
                fatherchecked: function (table) {//遍历当前二级框下的三级框是否是全选状态，全选返回true否则返回false
                    var fathercheckedflg = true
                    for (var i = 0; i < table.tablelist.length; i++) {
                        if (table.tablelist[i].sonchecked === false) {
                            fathercheckedflg = false;
                            return fathercheckedflg;
                        }
                    }
                    return fathercheckedflg
                },
                parentclick: function () {
                    var parentclick = this.parentchenked()//通过parentclick变量获取parentchenked返回的状态
                    if (parentclick === true) {
                        parentclick = false
                    }
                    else {
                        parentclick = true
                    }
                    for (var i = 0; i < this.tables.length; i++) {//根据parentclick变量的状态，设置全选框的状态
                        for (var x = 0; x < this.tables[i].tablelist.length; x++) {
                            this.tables[i].tablelist[x].sonchecked = parentclick
                        }
                    }
                },
                parentchenked: function () {//返回所有二级和三级框选中状态true或false（全选或非全选），parentchenked是通过v-bind绑定了checked状态，必须通过return返回
                    var parentchenkedflg = true
                    for (var i = 0; i < this.tables.length; i++) {
                        for (var x = 0; x < this.tables[i].tablelist.length; x++) {
                            if (this.tables[i].tablelist[x].sonchecked === false) {
                                parentchenkedflg = false;
                                return parentchenkedflg;
                            }
                        }
                    }
                    return parentchenkedflg;
                },
                delect: function (index, tableindex) {
                    var delectflg = 0
                    for (var i = 0; i < this.tables.length; i++) {//获取所有三级选项长度，长度为0时改变show的状态
                        for (var x = 0; x < this.tables[i].tablelist.length; x++) {
                            delectflg++;
                        }
                    }
                    //console.log(delectflg)
                    this.tables[tableindex].tablelist.splice(index, 1);//此处存疑，此行执行后，三级选项长度应该是减去1但实际是长度没变
                    //console.log(delectflg)
                    if (delectflg === 1) {
                        this.show = false
                    }
                },
                plus: function (body) {//增加商品数量
                    body.count++
                },
                less: function (body) {//减去商品数量
                    if (body.count > 1) {
                        body.count--
                    }
                    else {
                        return
                    }
                },
            }
        })
    </script>
</body>

</html>